<template>
  <div class="app-container">
    <div class="container-card">
      <div class="">
        <div>这里是首页</div>
        <a-button @click="handleToUser">跳转到用户列表</a-button>
        <a-button @click="handleToTest">跳转到3.0学习页</a-button>
      </div>
    </div>
    <div class="container-card">
      <GlobalUploadUse ref="globalUploadUseRef" @handleUpload="handleUpload" />
    </div>
    <GlobalCrop ref="globalCropRef" @handleModalSure="handleCropModalSure" @handleModalCancel="handleCropModalCancel" />
  </div>
</template>

<script>
import GlobalUploadUse from './GlobalUploadUse.vue'
import GlobalCrop from '@/components/globalCrop'
import { useRouter } from 'vue-router'
import { useState, useGetters } from '@/store/storeMap.js'
import { getCurrentInstance } from 'vue'
export default {
  props: {},
  components: {
    GlobalUploadUse,
    GlobalCrop
  },
  computed: {},
  setup() {
    const mapStateUser = useState('user', ['userInfo'])
    const mapGettersUser = useGetters('user', ['menus'])
    console.log('vuex使用', mapStateUser, mapGettersUser)

    const _router = useRouter()
    const handleToUser = () => {
      _router.push({
        path: '/user'
      })
    }
    const handleToTest = () => {
      _router.push({
        path: '/test'
      })
    }

    const { proxy } = getCurrentInstance()
    // 上传的所选文件
    const handleUpload = file => {
      console.log(file)
      proxy.$refs.globalCropRef.initCropInfo(file)
    }
    // 操作：裁剪框-确定
    const handleCropModalSure = ({ base64, blob, file }) => {
      console.log(base64, blob, file)
      // 更新上传组件的内容显示
      proxy.$refs.globalUploadUseRef.updateUploadFile(base64)
      // 此时进行图片上传到服务器，TODO。。。
    }
    // 操作：裁剪框-取消
    const handleCropModalCancel = () => {
      // 取消裁剪后需要做的操作，TODO。。。
    }

    return {
      userInfo: mapStateUser.userInfo,
      menus: mapGettersUser.menus,
      handleToUser,
      handleToTest,
      handleUpload,
      handleCropModalSure,
      handleCropModalCancel
    }
  }
}
</script>

<style lang="less"></style>

<style lang="less" scoped></style>
